<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多样式我的页面</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8fafc;
      color: #334155;
      min-height: 100vh;
      transition: all 0.3s;
      margin: 0;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0;
    }
    
    /* 顶部导航 */
    .main-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: relative;
      transition: all 0.3s;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
      transition: all 0.3s;
    }
    
    .header-actions {
      display: flex;
      gap: 15px;
      margin-left: auto;
    }
    
    .header-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: #64748b;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    /* 个人资料区域 */
    .profile-section {
      padding: 20px 15px;
      transition: all 0.3s;
      position: relative;
    }
    
    .profile-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
    }
    
    .avatar-container {
      position: relative;
      transition: all 0.3s;
    }
    
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      transition: all 0.3s;
    }
    
    .avatar-badge {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #0d6efd;
      border: 2px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
    }
    
    .profile-info {
      flex: 1;
    }
    
    .username {
      font-size: 20px;
      font-weight: 600;
      margin: 0 0 5px 0;
      transition: all 0.3s;
    }
    
    .user-bio {
      font-size: 14px;
      color: #64748b;
      margin: 0 0 10px 0;
      transition: all 0.3s;
    }
    
    .edit-profile {
      font-size: 14px;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .stats-container {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 10px 0;
      transition: all 0.3s;
    }
    
    .stat-item {
      transition: all 0.3s;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 5px 0;
      transition: all 0.3s;
    }
    
    .stat-label {
      font-size: 13px;
      color: #64748b;
      margin: 0;
      transition: all 0.3s;
    }
    
    /* 功能菜单区域 */
    .menu-section {
      padding: 15px;
      transition: all 0.3s;
    }
    
    .menu-title {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 15px 15px;
      transition: all 0.3s;
    }
    
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    
    .menu-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 5px;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.2s;
    }
    
    .menu-item-list {
      display: flex;
      align-items: center;
      padding: 15px;
      text-decoration: none;
      transition: all 0.2s;
    }
    
    .menu-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 8px;
      transition: all 0.3s;
    }
    
    .menu-icon-list {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-right: 15px;
      transition: all 0.3s;
    }
    
    .menu-text {
      font-size: 13px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .menu-text-list {
      font-size: 16px;
      font-weight: 500;
      flex: 1;
      transition: all 0.3s;
    }
    
    .menu-arrow {
      color: #94a3b8;
      font-size: 18px;
      transition: all 0.3s;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 10px;
      border: 1px solid #e9ecef;
      transition: all 0.3s;
    }
    
    .switch-label {
      font-size: 13px;
      margin-bottom: 8px;
      display: block;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .style-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .style-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .style-btn.active {
      border-color: #0d6efd;
      transform: scale(1.1);
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 10000;
      display: none;
    }
    
    /* 卡片组件 */
    .card {
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      overflow: hidden;
      margin: 15px;
      transition: all 0.3s;
    }
    
    /* 样式1 - 经典网格布局 */
    .style-1 {
      background-color: #f1f5f9;
    }
    
    .style-1 .main-header {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .style-1 .profile-section {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .user-bio,
    .style-1 .stat-label {
      color: rgba(255,255,255,0.8);
    }
    
    .style-1 .edit-profile {
      color: white;
      background-color: rgba(255,255,255,0.2);
      padding: 5px 12px;
      border-radius: 15px;
    }
    
    .style-1 .menu-section {
      background-color: white;
      margin: 15px;
      border-radius: 16px;
    }
    
    .style-1 .menu-icon {
      background-color: #f1f5f9;
      color: #0d6efd;
    }
    
    .style-1 .menu-item:hover {
      background-color: #f1f5f9;
    }
    
    .style-1 .style-btn:nth-child(1) {
      background-color: #0d6efd;
    }
    
    /* 样式2 - 列表布局 */
    .style-2 {
      background-color: #ffffff;
    }
    
    .style-2 .main-header {
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-2 .profile-section {
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-2 .edit-profile {
      color: #0d6efd;
      font-weight: 500;
    }
    
    .style-2 .stats-container {
      border-top: 1px solid #e2e8f0;
      margin-top: 10px;
    }
    
    .style-2 .menu-section {
      padding: 0;
    }
    
    .style-2 .menu-item-list {
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-2 .menu-item-list:hover {
      background-color: #f8fafc;
    }
    
    .style-2 .menu-icon-list {
      background-color: #f1f5f9;
      color: #64748b;
    }
    
    .style-2 .style-btn:nth-child(2) {
      background-color: #e2e8f0;
    }
    
    /* 样式3 - 深色卡片布局 */
    .style-3 {
      background-color: #0f172a;
      color: #f8fafc;
    }
    
    .style-3 .main-header {
      background-color: #1e293b;
    }
    
    .style-3 .header-title {
      color: white;
    }
    
    .style-3 .header-btn {
      color: #94a3b8;
    }
    
    .style-3 .card {
      background-color: #1e293b;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .style-3 .profile-section {
      background: linear-gradient(135deg, #3b82f6, #1e40af);
    }
    
    .style-3 .user-bio,
    .style-3 .stat-label {
      color: rgba(255,255,255,0.8);
    }
    
    .style-3 .edit-profile {
      color: white;
      background-color: rgba(255,255,255,0.2);
      padding: 5px 12px;
      border-radius: 15px;
    }
    
    .style-3 .menu-icon {
      background-color: rgba(255,255,255,0.1);
      color: #93c5fd;
    }
    
    .style-3 .menu-text {
      color: #e2e8f0;
    }
    
    .style-3 .menu-item:hover {
      background-color: rgba(255,255,255,0.05);
    }
    
    .style-3 .style-switcher {
      background-color: #1e293b;
      border-color: #334155;
    }
    
    .style-3 .switch-label {
      color: #e2e8f0;
    }
    
    .style-3 .style-btn:nth-child(3) {
      background-color: #1e293b;
      border: 1px solid #60a5fa;
    }
    
    /* 样式4 - 强调色块布局 */
    .style-4 {
      background-color: #ffffff;
    }
    
    .style-4 .main-header {
      background-color: #ea580c;
      color: white;
    }
    
    .style-4 .header-btn {
      color: white;
    }
    
    .style-4 .profile-section {
      padding-top: 40px;
    }
    
    .style-4 .avatar-container {
      margin: -60px auto 20px;
      display: flex;
      justify-content: center;
    }
    
    .style-4 .avatar {
      width: 100px;
      height: 100px;
      border: 4px solid white;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .style-4 .profile-info {
      text-align: center;
    }
    
    .style-4 .edit-profile {
      color: #ea580c;
      background-color: #fff7ed;
      padding: 8px 20px;
      border-radius: 20px;
      font-weight: 500;
    }
    
    .style-4 .stats-container {
      margin: 20px 0;
      background-color: #fff7ed;
      border-radius: 12px;
    }
    
    .style-4 .stat-value {
      color: #ea580c;
    }
    
    .style-4 .menu-item {
      padding: 20px 5px;
    }
    
    .style-4 .menu-icon {
      width: 50px;
      height: 50px;
      font-size: 24px;
    }
    
    .style-4 .menu-icon:nth-child(1) {
      background-color: #fee2e2;
      color: #dc2626;
    }
    
    .style-4 .menu-icon:nth-child(2) {
      background-color: #dbeafe;
      color: #2563eb;
    }
    
    .style-4 .menu-icon:nth-child(3) {
      background-color: #dcfce7;
      color: #166534;
    }
    
    .style-4 .menu-icon:nth-child(4) {
      background-color: #fef3c7;
      color: #d97706;
    }
    
    .style-4 .menu-icon:nth-child(5) {
      background-color: #ede9fe;
      color: #7c3aed;
    }
    
    .style-4 .menu-icon:nth-child(6) {
      background-color: #e0e7ff;
      color: #4338ca;
    }
    
    .style-4 .menu-icon:nth-child(7) {
      background-color: #fce7f3;
      color: #be185d;
    }
    
    .style-4 .menu-icon:nth-child(8) {
      background-color: #d1fae5;
      color: #059669;
    }
    
    .style-4 .style-btn:nth-child(4) {
      background-color: #ea580c;
    }
    
    /* 样式5 - 极简分割线布局 */
    .style-5 {
      background-color: #ffffff;
    }
    
    .style-5 .main-header {
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-5 .profile-section {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .style-5 .avatar {
      width: 70px;
      height: 70px;
      margin-bottom: 15px;
    }
    
    .style-5 .edit-profile {
      color: #64748b;
      font-size: 13px;
      margin-top: 5px;
    }
    
    .style-5 .stats-container {
      width: 100%;
      margin: 15px 0;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-5 .menu-section {
      padding: 0;
    }
    
    .style-5 .menu-item-list {
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .style-5 .menu-icon-list {
      background: none;
      color: #64748b;
      width: auto;
      height: auto;
      margin-right: 12px;
    }
    
    .style-5 .menu-text-list {
      font-size: 15px;
      color: #334155;
    }
    
    .style-5 .style-btn:nth-child(5) {
      background-color: #334155;
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <span class="switch-label">选择样式</span>
    <div class="style-options">
      <button class="style-btn active" data-style="1" title="经典网格"></button>
      <button class="style-btn" data-style="2" title="列表布局"></button>
      <button class="style-btn" data-style="3" title="深色卡片"></button>
      <button class="style-btn" data-style="4" title="强调色块"></button>
      <button class="style-btn" data-style="5" title="极简分割"></button>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <header class="main-header">
      <div class="header-title">我的</div>
      <div class="header-actions">
        <button class="header-btn" id="searchBtn">
          <i class="fa fa-search"></i>
        </button>
        <button class="header-btn" id="settingsBtn">
          <i class="fa fa-cog"></i>
        </button>
      </div>
    </header>
    
    <!-- 个人资料区域 -->
    <div class="profile-section">
      <div class="profile-header">
        <div class="avatar-container">
          <img src="https://picsum.photos/seed/user1/200/200" alt="用户头像" class="avatar">
          <div class="avatar-badge">
            <i class="fa fa-plus"></i>
          </div>
        </div>
        <div class="profile-info">
          <h1 class="username">张小明</h1>
          <p class="user-bio">热爱生活，分享美好瞬间 📸</p>
          <a href="#" class="edit-profile" id="editProfileBtn">编辑资料</a>
        </div>
      </div>
      
      <div class="stats-container">
        <div class="stat-item">
          <p class="stat-value">128</p>
          <p class="stat-label">动态</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">356</p>
          <p class="stat-label">关注</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">1.2k</p>
          <p class="stat-label">粉丝</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">528</p>
          <p class="stat-label">获赞</p>
        </div>
      </div>
    </div>
    
    <!-- 功能菜单区域 -->
    <div class="menu-section">
      <div class="menu-content" id="menuContent">
        <!-- 菜单内容将通过JS根据样式动态生成 -->
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 菜单数据
    const menuItems = [
      { icon: 'fa-user', text: '个人主页' },
      { icon: 'fa-bookmark', text: '收藏' },
      { icon: 'fa-heart', text: '喜欢' },
      { icon: 'fa-clock-o', text: '历史' },
      { icon: 'fa-cog', text: '设置' },
      { icon: 'fa-question-circle', text: '帮助与反馈' },
      { icon: 'fa-shield', text: '账号安全' },
      { icon: 'fa-sign-out', text: '退出登录' }
    ];
    
    // 获取元素
    const styleBtns = document.querySelectorAll('.style-btn');
    const menuContent = document.getElementById('menuContent');
    const toast = document.getElementById('toast');
    const headerBtns = document.querySelectorAll('.header-btn');
    const editProfileBtn = document.getElementById('editProfileBtn');
    
    // 初始化页面
    function initPage(style = 1) {
      renderMenu(style);
    }
    
    // 根据样式渲染不同的菜单布局
    function renderMenu(style) {
      menuContent.innerHTML = '';
      
      if (style === 1 || style === 3 || style === 4) {
        // 网格布局
        const menuGrid = document.createElement('div');
        menuGrid.className = 'menu-grid';
        
        menuItems.forEach(item => {
          const menuItem = document.createElement('a');
          menuItem.className = 'menu-item';
          menuItem.href = '#';
          menuItem.innerHTML = `
            <div class="menu-icon">
              <i class="fa ${item.icon}"></i>
            </div>
            <span class="menu-text">${item.text}</span>
          `;
          menuItem.addEventListener('click', (e) => {
            e.preventDefault();
            showToast(`打开${item.text}`);
          });
          menuGrid.appendChild(menuItem);
        });
        
        menuContent.appendChild(menuGrid);
      } else {
        // 列表布局
        const menuList = document.createElement('div');
        menuList.className = 'menu-list';
        
        menuItems.forEach(item => {
          const menuItem = document.createElement('a');
          menuItem.className = 'menu-item-list';
          menuItem.href = '#';
          menuItem.innerHTML = `
            <div class="menu-icon-list">
              <i class="fa ${item.icon}"></i>
            </div>
            <span class="menu-text-list">${item.text}</span>
            <i class="fa fa-angle-right menu-arrow"></i>
          `;
          menuItem.addEventListener('click', (e) => {
            e.preventDefault();
            showToast(`打开${item.text}`);
          });
          menuList.appendChild(menuItem);
        });
        
        menuContent.appendChild(menuList);
      }
      
      // 样式3额外添加卡片容器
      if (style === 3) {
        const card = document.createElement('div');
        card.className = 'card';
        card.appendChild(menuContent.firstChild);
        menuContent.appendChild(card);
      }
    }
    
    // 切换样式
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        document.body.className = '';
        
        // 添加当前样式
        this.classList.add('active');
        const style = parseInt(this.getAttribute('data-style'));
        document.body.classList.add(`style-${style}`);
        
        // 重新渲染菜单
        renderMenu(style);
        
        showToast(`已切换到${this.title}样式`);
      });
    });
    
    // 头部按钮事件
    headerBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const action = this.querySelector('i').classList.contains('fa-search') ? '搜索' : '设置';
        showToast(`打开${action}`);
      });
    });
    
    // 编辑资料按钮事件
    editProfileBtn.addEventListener('click', function(e) {
      e.preventDefault();
      showToast('进入资料编辑页面');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 初始化
    initPage();
  </script>
</body>
</html>